<template>
	<view>
		<view class="forgot">
			<view class="forgot_name">
				真实姓名
			</view>
			<u-input
			    placeholder="请输入真实姓名"
			    border="surround"
			    v-model="username"
				@change="change"
				fontSize='14'
				class="textinput"
				
			  ></u-input>
		</view>
		<view class="forgot">
			<view class="forgot_name">
				身份证号
			</view>
			<u-input
			    placeholder="请输入身份证号"
			    border="surround"
			    v-model="userid"
				@change="change"
				fontSize='14'
				class="textinput"
				type="idcard"
			  ></u-input>
		</view>
		<view class="real">上传身份信息</view>
		<view class="realname flex-between">
			<view class="realname_left">
				<view class="">头像面</view>
				<image :src="pictureA" v-if="pictureA!==''" mode=""></image>
				<image class="imgdel" src="../../static/my/del.png" v-if="pictureA!==''" mode="" @click="pictureA=''"></image>
				<image src="../../static/my/id(2).png" v-else @click="uploadPic('1')" mode=""></image>
			</view>
			<view class="realname_left">
				<view class="">国徽面</view>
				<image :src="pictureB" v-if="pictureB!==''" mode=""></image>
				<image class="imgdel" src="../../static/my/del.png" v-if="pictureB!==''" mode="" @click="pictureB=''"></image>
				<image src="../../static/my/id(1).png" v-else @click="uploadPic('2')" mode=""></image>
			</view>
		</view>
		<view class="btnsub " :class="isbtn?'btnissub':''" @click="isbtn?confirm():''">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				userid:'',
				isbtn:false,
				pictureA:'',
				pictureB:''
			}
		},
		methods: {
			change(){
				const {userid,username}=this
				if(username!==''&&userid!==''){
					this.isbtn=true
				}else{
					this.isbtn=false
				}
			},
			uploadPic(type) {
				let _this = this
				uni.chooseImage({
					count: 1,
					success: res => {
						let tempFilePaths = res.tempFilePaths[0]
						uni.uploadFile({
							url: this.$baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址 
							filePath: tempFilePaths,
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success(res) {
								var res = JSON.parse(res.data)
								console.log(res)
								if(res.code==1){
									if(type==1){
										this.pictureA=res.data.fullurl
									}else{
										this.pictureB=res.data.fullurl
									}
								}
								
							},
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.forgot{
	padding-top: 40rpx;
	margin: 0rpx 30rpx;
	.forgot_name{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 45rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 20rpx;
	}
	.textinput{
		height: 88rpx;
		line-height: 88rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: none;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #CCCCCC;
		text-align: left;
		font-style: normal;
	}
	.textbut{
		border: none;
		background-color: #F6F6F6;
		font-weight: 400;
		font-size: 28rpx;
		color: #5D78FF;
	}
	.rebut .u-button .u-button__text{
		// color: #999999;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx !important;
		color: #5D78FF;
		text-align: left;
		font-style: normal;
	}
}
.real{
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #333333;
	margin: 30rpx 30rpx 20rpx;
}
.realname{
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
	margin: 0 30rpx;
	image{
		width: 330rpx;
		height: 207rpx;
		margin-top: 10rpx;
	}
	&_left{
		position: relative;
		.imgdel{
			position: absolute;
			width: 36rpx;
			height: 36rpx;
			top: 46rpx;
			right: 10rpx;
		}
	}
}
.btnsub{
	width: 560rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-radius: 50rpx;
	background: #EAEAEA;
	color: #fff;
	margin: 80rpx auto;
	text-align: center;
}
.btnissub{
	background: #5D78FF;
}
</style>
